<template>
    <TabGrayEasyCard :title="'品牌分析'" @onMore="goDetail(props.permi)" :tabs="card.tabs" :curTab="card.curTab"
        :tabRight="card.tabRight" @onChange="changeTab" :grayCardList="card.grayCardList" :lineText="''" :barText="''"
        :unitText="`单位：${card.unitText}`" :updateText="card.updateText"
        v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }">

        <slot>
            <el-table :data="card.tableData" height="100%">
                <el-table-column v-if="card.curTab == '楼层'" prop="floorName" :label="card.curTab" :align="'left'" width="80"/>
                <el-table-column v-else prop="firstFormat" :label="card.curTab" :align="'left'"  width="90"/>
                <el-table-column label="面积" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.netRentArea) }}
                    </template>
                </el-table-column>
                <el-table-column label="销售额" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.yearmonthSales) }}
                    </template>
                </el-table-column>
                <el-table-column label="月坪效" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.monthFlatEffect) }}
                    </template>
                </el-table-column>
                <el-table-column label="月租费" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.invrecamtl) }}
                    </template>
                </el-table-column>
                <el-table-column label="租售比" :align="'right'">
                    <template #default="scope">
                        {{ scope.row.salesInvamtlMonth }}%
                    </template>
                </el-table-column>
            </el-table>
        </slot>
    </TabGrayEasyCard>
</template>

<script setup>
import TabGrayEasyCard from '@/DbComponents/tabGrayEasyCard'
// import { toThousands, dateFormat } from '@/utils/number-util'
import { toThousands } from '@/utils/number-util'
import dashBoardApi from '@/api/Manage/Business/dashBoard'
// import { ref, reactive, watch, computed } from 'vue'
import { reactive, watch, computed } from 'vue'
import { reportLog } from '@/utils/reportLog'
import { useRouter } from 'vue-router'
const router = useRouter()

const props = defineProps({
    permi: {
        type: String,
        required: false,
        default: ''
    },
    hideList: {
        type: Array,
        required: false,
    },
    biProjectCode: {
        type: String,
        required: false,
        default: ''
    }
})
const card = reactive(
    {
        tabs: [{ label: '楼层', value: '楼层' }, { label: '业态', value: '业态' }],
        curTab: '楼层',
        tabRight: '',
        grayCardList: [{ label: '销售额', value: '', unit: '万', color: '' }, { label: '月坪效', value: '', unit: '元/㎡/月', color: '' }, { label: '租售比', value: '', unit: '%', color: '' }],
        unitText: '',
        updateText: '',
        tableData: [],
        startDate: '',
        endDate: '',
    }
)
const getCardData = () => {
    dashBoardApi.brandCardListApi({ biProjectCode: props.biProjectCode }).then((res) => {
        if (res.data.code == 200) {
            card.tabRight = res.data.data.yearmonth
            card.grayCardList[0].value = toThousands(res.data.data.yearmonthSales)
            card.grayCardList[1].value = toThousands(res.data.data.monthFlatEffect)
            card.grayCardList[2].value = res.data.data.salesInvamtlMonth
            card.unitText = res.data.data.valueUnit
        }
    }).catch(err => {
        console.log(err)
    });
}
const getChartDataFloor = () => {
    dashBoardApi.brandCardFloorListApi({ biProjectCode: props.biProjectCode }).then((res) => {
        if (res.data.code == 200) {
            card.tableData = res.data.data
        }
    }).catch(err => {
        console.log(err)
    });
}
const getChartDataFormat = () => {
    dashBoardApi.brandCardFormatListApi({ biProjectCode: props.biProjectCode }).then((res) => {
        if (res.data.code == 200) {
            card.tableData = res.data.data
        }
    }).catch(err => {
        console.log(err)
    });
}

const goDetail = (permi) => {
    reportLog({
        type: 4,
        resourceKey: permi,
    })
    if (card.curTab == '楼层') {
        router.push({
            path: '/page/routeController/index',
            query: {
                rid: 'Manage/Business/salesVolume/wholeSceneBrand',
                rTitle: '品牌分析-整场品牌列表',
                biProjectCode: props.biProjectCode,
                dataTime: card.tabRight,
                tabPermi: 'p_btn_901_jingyingxiangmu_shangye',
                curTab: '月'
            },
        })
    }
    if (card.curTab == '业态') {
        router.push({
            path: '/Manage/Business/plateauEffectAnalysis',
            query: {
                rTitle: '品牌分析-项目业态坪效报表',
                biProjectCode: props.biProjectCode,
            },
        })
    }
}
const changeTab = (value) => {
    // 切换tab
    if (value == '楼层') {
        getChartDataFloor()
    }
    if (value == '业态') {
        getChartDataFormat()
    }
    card.curTab = value
}

getCardData()
getChartDataFloor()

const biProjectCode = computed(() => {
    return props.biProjectCode
});
watch(biProjectCode, () => {
    getCardData()
    card.curTab == '楼层' ? getChartDataFloor() : getChartDataFormat()
}, { deep: true });
</script>

<style scoped lang="scss"></style>
